<!--  账单历史组件 -->
<template>
    <nut-swipe :name="swipeName" :close-on-click="closeOnClick" ref="swipeComponent">
        <nut-cell :customStyle="cellCustomStyle">
            <view class="bill_list_item">
                <view class="flex bill_list_item_top">
                    <image class="shop_logo inline_bl" :src="shopSrc" />
                    <view class="flex_item">
                        <view class="bill_status f_12 color_red l_18 f_r">{{ goodReturnStatusText }}</view>
                        <view class='f_14 c_3 f_w l_18 ellipsis'> {{ shopNameStr }}</view>
                        <view class='f_12 f_w l_20 l-sp-0 item_saletime'>{{ billData.billDetail.saleTime }}</view>
                    </view>
                </view>
                <nut-divider :custom-style="{ color: '#e9e9e9', borderColor: '#e9e9e9', margin: '0 16px' }" />
                <view class="flex l_50 bill_list_item_middle">
                    <view class='inline_bl flex_item'>{{ goodNameStr }}</view>
                    <view class='inline_bl c_3 f_w'> ¥ {{ receivableAmount }}</view>
                </view>
                <nut-divider :custom-style="{ color: '#e9e9e9', borderColor: '#e9e9e9', margin: '0 0px' }" />
                <view class="bill_list_item_bottom">
                    <nut-button shape="square" plain custom-color="#b08f5d" :customStyle="btnCustomStyle">{{ invoiceBtnTextStr }}</nut-button>
                    <nut-button shape="square" plain custom-color="#b08f5d" :customStyle="btnCustomStyle">查看小票</nut-button>
                </view>
            </view>
        </nut-cell>


        <template #right>
            <nut-button  type="danger" shape="square" @click="deleteBill"
                class="inline_bl">删除</nut-button>
        </template>
    </nut-swipe>


    <nut-dialog teleport="#app" title="删除数字小票" content="确认删除该张数字小票吗？" v-model:visible="deleteBillModalFlag"
        @ok="onDelete" />
</template>

<script setup>
import { useOutsideUserInfoStore } from '@/store/userInfo' // store数据
const useInfoStore = useOutsideUserInfoStore()
const { proxy } = getCurrentInstance();
const emits = defineEmits(["getData"]);
defineOptions({
    name: 'BillListItem'
})
const props = defineProps({
    // 账单数据
    billData: {
        type: Object
    }
})
// 按钮样式
const btnCustomStyle = {
    marginLeft: '10px',
    minWidth: '160rpx',
    fontSize:'20rpx',
    height: '50rpx',
    lineHeight: '49rpx',
    position: 'relative',
    borderRadius: '3px',
    boxSizing: 'border-box'
}
// cell样式
const cellCustomStyle = {
    padding: '0'
}

// 唯一标识 ，使用 SwipeGroup 控制 Swipe 之间互斥  name 为必填项
const closeOnClick = ['content'] // string[] 点击自动关闭的部分
const swipeName = computed(() => {
    return billDetailData.shopId + billDetailData.billId
})

// 账单数据
const billDetailData = props.billData.billDetail || {}

// 店铺logo
const shopSrc = computed(() => {
    return props.billData.shopLogo
        ? props.billData.shopLogo
        : "../../../static/imgs/tabar/shop_logo.png";
});
// 展示的店铺名称
const shopNameStr = computed(() => {
    let orgName = useInfoStore.orgInfo.orgName
    let shopName = billDetailData.shopName
    return orgName ? (shopName + '(' + orgName + ')') : shopName
});

// 商品名称
const goodNameStr = computed(() => {
    return getStr(props.billData)
});
const getStr = (item) => {
    let str = '';
    let goodname = '';
    if (item && item.billDetail) {
        let list = item.billDetail.billItemDetails || [];
        if (list.length) {
            goodname = list[0].itemName
        } else {
            goodname = '';
        }
        if (goodname && goodname.length > 10) {
            goodname = goodname.slice(0, 10) + '...'
        }
        if (list.length) {
            if (list.length == '1') {
                str = goodname
            } else {
                str = goodname + '等' + list.length + '件商品'
            }
        }
    }
    return str;
}

// 开发票按钮文案
const invoiceBtnTextStr = computed(() => {
    return props.billData.billReceiptStatus == 1 ? '已开票' : '开具发票'
});

// 退货状态
const goodReturnStatusText = computed(() => {
    let statusText = ''
    if (billDetailData.billReturnStatus == '1') {
        statusText = '退货中';
    } else if (billDetailData.billReturnStatus == '2') {
        statusText = '部分退货';
    } else if (billDetailData.billReturnStatus == '3') {
        statusText = '全部退货';
    }
    return statusText
});
// 商品金额
const receivableAmount = computed(() => {
    return billDetailData.receivableAmount ? billDetailData.receivableAmount.toFixed(2) : '0.00';
});

const deleteBillModalFlag = ref(false) // 删除账单确认弹层是否显示
const deleteBill = (e) => { // 点击删除账单
    deleteBillModalFlag.value = true
}
const onDelete = () => { // 确认删除账单
    proxy.$refs.swipeComponent.close() // 关闭当前账单
    deleteBillModalFlag.value = false
    emits('getData') // 刷新列表
}


</script>
<style scoped lang="scss">
/* 添加这段样式后，Primary Button 会变成绿色 */
:root, page {
    --nut-button-primary-background-color: green;
}
.bill_list_item {
    width: 100%;

    .bill_list_item_top {
        padding: 13px 16px 10px 16px;
        .shop_logo {
            width: 68rpx;
            height: 68rpx;
            border-radius: 4px;
            margin-right: 14rpx;
            border-radius: 2px;
            margin-right: 18rpx;
        }

        .item_saletime {
            font-family: PingFangSC-Regular, PingFang SC;
            color: rgba(153, 153, 153, 1);
        }

    }
    .bill_list_item_middle{
        padding: 0 16px;
    }
    .bill_list_item_bottom {
        text-align: right;
        padding: 10px 16px;
    }
}
</style>
